<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // ES6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为赋值结构
        // 解构赋值：
        // 左右两边必须一样，右边得是个东西
        // 必须定义和赋值同步完成
        // 解构：解开目标的整体解构
        // 赋值：将目标中的数据赋值到我们定义的变量中


        // 对象的解构赋值语法
        // var {
        //     foo,
        //     bar
        // } = {
        //     foo: 'aaa',
        //     bar: 'bbb'
        // };
        // 变量名必须和属性名一样


        // 解构语法
        // let [a, b, c] = [0, 1, 2];
        // console.log(a, b, c);

        // 对象的解构往往用在函数的形参列表中
        // 调用函数时，传的对象（实参）就能自动解构
        // function People({
        //     name,
        //     age,
        //     race,
        //     Grade,
        //     aggressivity
        // }) {
        //     this.name = name;
        //     this.age = age;
        //     this.race = race;
        //     this.Grade = Grade;
        //     this.aggressivity = aggressivity;
        // }
        // var huang = new People({
        //     'name': '黄蜀郎',
        //     'age': 31,
        //     'race': '僵尸',
        //     'Grade': 10,
        //     'aggressivity': 1
        // })
        // console.log(huang);


        // 字符串的赋值解构
        // 和数组一致,变量名的储存顺序和字符串储存的顺序一致
        // let str = 'abc';
        // let [d, f] = str;
        // console.log(d, f);

        // 解构赋值的作用
        // 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回.
        // 有有了解构赋值,取出这些值就非常的方便


        // 剩余参数
        // eg:左边迎接的人群比来宾少,有些来宾就接不到
        // var [a, b, c] = [1, 2, 3, 4, 5, 6, 7, 8];
        // console.log(a);
        // console.log(b);
        // console.log(c);
        // 可以在c变量之前加上 ...运算符,表示c现在接受所有剩余的参数
        // let [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8];
        // console.log(a, b, c);
        // *注意:  ...运算符只能出现在最后一项


        // 强制解构
        // 在数组前面加上 ...运算符,表示强制解构.这个数组将变为零散量
        // 如同每个量之间隔了空格输出了
        // var arr = [1, 2, 3];
        // console.log(...arr); // 1 2 3
        // console.log(1, 2, 3); // 1 2 3

        // ...运算符也可以作用于对象,通常用于一个情况:
        // 创建obj1的副本,仅仅改变obj1的某一个(些)属性
        // var obj1 = {
        //     "a": 1,
        //     "b": 2,
        //     "c": 3
        // };
        // var obj2 = {
        //     ...obj1,
        //     "b": 8
        // };
        // console.log(obj2); // { a:1, b:8, c:3 }

        // 强制解构还可以用于数组对象,可以将类数组对象变为真的数组
        // const fun = function() {
        //     //下面的语句是最快的将类数组对象变为数组的方法
        //     var arr = [...arguments];
        //     console.log(arr); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]
        //     console.log(Array.isArray(arr)); // true
        // }
        // fun(1, 2, 3, 4, 5, 6, 7, 8);


        // 如果等号的右边不是数组，或者严格地说，不是可遍历的结构，那么将会报错。
        // 报错
        // let [foo] = 1;
        // let [foo] = false;
        // let [foo] = NaN;
        // let [foo] = undefined;
        // let [foo] = null;
        // let [foo] = {};


        // 对于Set 结构，也可以使用数组的解构赋值。
        // let [x, y, z] = new Set([1, 2, 3]);
        // console.log(x, y, z);


        // 结构赋值，允许指定默认值。
        // let [foo = 1] = []; //foo   1
        // let [x, y = 'b'] = ['a']; //x = 'a'   y = 'b'
        // let [x, y = 'b'] = ['a', 1]; //x = 'a'  y = 1



        // let co = ['a', 'b', 'c'],
        //     fir = 'd',
        //     sec = 'e';
        // [fir, sec] = co;



        // 还可以交换
        // let a = 1,
        //     b = 2;
        // [a, b] = [b, a];

        // 字符串结构
        // const [a, b, c, d, e] = 'hellow';
        // console.log(a + ' ', b + ' ', c + ' ', d + ' ', e);



        // let {
        //     length: len //属性名：变量名
        // } = 'hello';
        // console.log(len);


        // 使用对象或数组解构模式替代具名参数
        // function setCookie(name, value, {
        //     secure,
        //     path,
        //     domain,
        //     expires
        // } = {}) {
        //     console.log(secure, expires, domain);
        // }
        // setCookie('type', 'js', {
        //     secure: true,
        //     expires: 600
        // });
    </script>
</body>

</html>